<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请假流程</title>
    <script src="../../../../../res/js/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../../../../../res/js/login_common.js" charset="utf-8"></script>
    <script src="../../../../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../../../../res/js/Tools.js" charset="utf-8"></script>
    <script src="../../../../../res/js/error.js" charset="utf-8"></script>
    <link rel="shortcut icon" type="image/x-icon" href="../../../../../res/images/favicon.ico">
    <link rel="stylesheet" href="../../../../../res/layui/css/layui.css" media="all">
</head>
<body style="padding: 10px">
<h1 align="center" style="margin-bottom: 20px">员工请假申请</h1>
<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">

        <input type="hidden" id="pkVacateId" name="pkVacateId"/>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 145px">姓名</label>
            <div class="layui-input-inline">
                <input autocomplete="off" class="layui-input" disabled name="personnelName"
                       id="personnelName" type="text"/>
                <input id="personnelId" type="hidden" name="personnelId"/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 145px">所在部门</label>
            <div class="layui-input-inline">
                <input autocomplete="off" class="layui-input" disabled name="departmentName"
                       id="departmentName"
                       type="text"/>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label" style="width: 145px">职务</label>
            <div class="layui-input-inline">
                <input autocomplete="off" class="layui-input" disabled id="postName" name="postName" disabled
                       type="text">
            </div>
        </div>
        <div class="layui-form-item" pane="">
            <label class="layui-form-label">请假类别</label>
            <div class="layui-input-block">
                <div id="vacateType1"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">请假时段</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="text" class="layui-input" id="test10" placeholder=" - ">
                    <input type="hidden" class="layui-input" id="vacateStart" name="vacateStart" placeholder=" - ">
                    <input type="hidden" class="layui-input" id="vacateEnd" name="vacateEnd" placeholder=" - ">
                </div>
                <label class="layui-form-label" style="width: 120px">请假时长合计</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" id="vacateHour" name="vacateHour" placeholder="天"
                           disabled="" type="text"/>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">请假事由</label>
        <div class="layui-input-block">
            <textarea name="vacateCause" id="vacateCause" placeholder="请输入请假原因" class="layui-textarea" lay-verify="required"></textarea>
        </div>
    </div>
    <hr/>
    <div class="layui-form-item">
        <div class="layui-input-block" id="flows">
            <button type="submit" class="layui-btn site-demo-active" lay-submit="" lay-filter="demo1">立即提交</button>
            <input type="button" id="demo3" class="layui-btn layui-btn-primary" value="取消">
        </div>
    </div>
</form>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>流程日志</legend>
</fieldset>
<ul class="layui-timeline" id="schedule">

</ul>
<script>
    var table2;
    // 修改赋值
    let pkVacateId = getQueryString("pkVacateId");
    layui.use(['form', 'table', 'layedit', 'laydate'], function () {
        var table = layui.table
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , form = layui.form;
        //日期时间范围
        laydate.render({
            elem: '#test10'
            , type: 'datetime'
            , range: true
            , format: 'yyyy年MM月dd日HH时',
            done: function (value, date, endDate) {
                let startDate = date.year + '-' + date.month + '-' + date.date + ' ' + date.hours + ':00:00';//yyyy-mm-ss HH:ss
                $("#vacateStart").val(startDate);
                let endD = endDate.year + '-' + endDate.month + '-' + endDate.date + ' ' + endDate.hours + ':00:00';
                $("#vacateEnd").val(endD);
                const startDate1 = new Date(startDate);
                let endDate1 = new Date(endD);
                let dd = (endDate1 - startDate1) / 1000 / 60 / 60 / 24;
                $("#vacateHour").val(dd);
                //yyyy-mm-ss HH:ss

            }
        });

        let res;
        //
        console.log(pkVacateId);
        if (pkVacateId) {
            res = getAjaxById(getRootPath() + "OaVacte/findById/" + pkVacateId);
            $("#pkVacateId").val(res.pkVacateId);
            $("#vacateCause").val(res.vacateCause); // 请假事由
            //查询请假类别
            let nation = getAjaxById(getRootPath() + "OaDataDictionaryAction/findKeyword/VACATETYPE");
            $.each(nation, function (index, item) {
                if (res.vacateType === item.pkDataDictionaryId) {
                    $("#vacateType1").append('<input type="radio" id="vacateType' + item.pkDataDictionaryId + '" name="vacateType" value=" ' + item.pkDataDictionaryId + ' " title="' + item.dataDictionaryName + '" checked>');
                } else {
                    $("#vacateType1").append('<input type="radio" id="vacateType' + item.pkDataDictionaryId + '" name="vacateType" value=" ' + item.pkDataDictionaryId + ' " title="' + item.dataDictionaryName + '">');
                }
            });
            res = getAjaxById(getRootPath() + "OaPersonnelAction/findById/" + res.personnelId);
            // 人员id
            $("#personnelId").val(res.data.pkPersonnelId);
            //请假人员名称
            $("#personnelName").val(res.data.personnelName);
            // 请假人员部门
            $("#departmentName").val(res.data.departmentName);
            // 请假岗位
            $("#postName").val(res.data.postName);
        } else {
            res = getAjaxById(getRootPath() + "OaPersonnelAction/getUser");
            /*//查询请假类别
            let nation1 = getAjaxById(getRootPath() + "OaDataDictionaryAction/findKeyword/VACATETYPE");
            $.each(nation1, function (index, item) {
                if (index===0) {
                    $("#vacateType1").append('<input type="radio" id="vacateType" name="vacateType" value=" ' + item.pkDataDictionaryId + ' " title="' + item.dataDictionaryName + '" checked>')
                }else {
                    $("#vacateType1").append('<input type="radio" id="vacateType" name="vacateType" value=" ' + item.pkDataDictionaryId + ' " title="' + item.dataDictionaryName + '">')
                }
            });*/
            // 人员id
            $("#personnelId").val(res.pkPersonnelId);
            //人员名称
            $("#personnelName").val(res.personnelName);
            // 请假人员部门
            $("#departmentName").val(res.departmentName);
            // 离职人员岗位
            $("#postName").val(res.postName);

            //查询请假类别
            const nation = getAjaxById(getRootPath() + "OaDataDictionaryAction/findKeyword/VACATETYPE");
            $.each(nation, function (index, item) {
                if (index === 0) {
                    $("#vacateType1").append('<input type="radio" id="vacateType" name="vacateType" value=" ' + item.pkDataDictionaryId + ' " title="' + item.dataDictionaryName + '" checked>')
                } else {
                    $("#vacateType1").append('<input type="radio" id="vacateType" name="vacateType" value=" ' + item.pkDataDictionaryId + ' " title="' + item.dataDictionaryName + '">')
                }
                /* $("#vacateType").append('<option value="' + item.pkDataDictionaryId + '">' + item.dataDictionaryName + '</option>')*/
            });
        }
        form.render();


        //监听提交
        form.on('submit(demo1)', function (data) {
            let vacateHour = $("#vacateHour").val();
            if(!vacateHour || vacateHour < 1){
                //小tips
                layer.tips('请正确选择请假时间', '#test10', {
                    tips: [1, '#ff0500'],
                    time: 3000
                });
                return false;
            }

            let res = postAjax(getRootPath() + "OaVacte/addOaVacateFlow", data.field);

            if (res === 1) {
                layer.msg('新增成功3秒后关闭当前窗口', {icon: 1});
                setTimeout(function () {
                    formClose();
                }, 3000);
                setTimeout(function () {
                    parent.layui.table.reload('test');//刷新父页面
                    //window.parent.location.reload();//刷新父页面
                    const index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                }, 3001);
                //window.location.reload();//刷新页面
            } else if (res === 500) {

            } else {
                layer.msg("新增失败");
            }
            return false;
        });

        $("#demo3").on("click", function () {
            //询问框
            layer.confirm('是否关闭该页面？', {
                btn: ['是的', '取消'] //按钮
            }, function () {
                formClose();
                parent.layui.table.reload('test');//刷新父页面
                //window.parent.location.reload();//刷新父页面
                const index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                parent.layer.close(index);
            });
        });

        if (pkVacateId) {
            const ress = getAjaxById(getRootPath() + "OaFlowAction/selectFlowSchedule/" + pkVacateId);
            $("#schedule").html("");
            $.each(ress, function (index, item) {
                if (item.createdBy) {
                    $("#schedule").append('<li class="layui-timeline-item">\n' +
                        '        <i class="layui-icon layui-timeline-axis"></i>\n' +
                        '        <div class="layui-timeline-content layui-text">\n' +
                        '            <h3 class="layui-timeline-title">' + dateFormat('yyyy-MM-dd hh:mm:ss', new Date(item.createdTime)) + '&nbsp;&nbsp;&nbsp;' + item.flowName + '</h3>\n' +
                        '            <p>' + item.formReason + '</p>\n' +
                        '            <p>操作人：' + item.createdBy + '</p>\n' +
                        '        </div>\n' +
                        '    </li>')

                } else {
                    $("#schedule").append('<li class="layui-timeline-item">\n' +
                        '        <i class="layui-icon layui-timeline-axis"></i>\n' +
                        '        <div class="layui-timeline-content layui-text">\n' +
                        '            <h3 class="layui-timeline-title">' + dateFormat('yyyy-MM-dd hh:mm:ss', new Date(item.createdTime)) + '&nbsp;&nbsp;&nbsp;' + item.flowName + '</h3>\n' +
                        '            <p>' + item.formReason + '</p>\n' +
                        '        </div>\n' +
                        '    </li>')
                }
            });
        }


    });
</script>
</body>
</html>